<template>
    <div>
      <el-select filterable :filter-method="pinyinMatch" v-model="value1" placeholder="请选择学院" >
         <el-option
           v-for="item in source"
           :key="item"
           :label="item"
           :value="item">
         </el-option>
       </el-select>

       <el-select v-model="value2" placeholder="请选择年级">
         <el-option
           v-for="item in secondList"
           :key="item"
           :label="item"
           :value="item">
         </el-option>
       </el-select>

      <el-select v-model="value3" placeholder="请选择班级">
         <el-option
           v-for="item in thirdList"
           :key="item"
           :label="item"
           :value="item">
         </el-option>
       </el-select>
        <div id="map" style="height: 800px;width: 100%;" ref="myEchart"></div>
        <!-- <div style="border: 1px solid #000; width: 100%; height: 1000px;"></div> -->
        <!-- <el-button type="primary" @click="init()" size="small">刷新</el-button> -->
    </div>
</template>

<script>
  import * as echarts from 'echarts'
  import pinyin from 'pinyin-match'
  const henanJson = require('../../../utils/echarts-master/china.json')
  export default {
    name: 'dp',
    data () {
      return {
        maxNumber: '',
        city: [],
        MapData: [],
        levelFirst: '',
        firstList: [],
        levelSecond: '',
        secondList: [],
        levelThird: '',
        thirdList: [],
        levelFourth: '',
        fourthList: [],
        copyDept: '',
        source: '',
        dataList: [], // 整个树表
        erDataList: [], // 存二级表
        sanDataList: [], // 存三级表
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: '昨天',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }, {
            text: '一周前',
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }]
        },
        value1: '', // 学院
        value2: '', // 年级
        value3: '', // 班级
        v2length: 0,
        params: {
          institute: '',
          grade: '',
          classe: ''
        }
      }
    },
    watch: {
      value1 (newname, oldname) {
        // 进行重置
        this.secondList = []
        this.value2 = ''
        this.thirdList = []
        this.value3 = ''
        this.re()
        for (let k = 0; k < this.dataList.length; k++) {
          if (this.dataList[k].name === newname) { // 检测选择了哪个
            // 构建参数
            this.params.institute = newname
            this.getList()
            // 更改选择框
            this.erDataList = this.dataList[k].children
            for (let i = 0; i < this.erDataList.length; i++) {
              this.secondList.push(this.erDataList[i].name)
            }
            return
          }
        }
      },
      value2 (newname, oldname) {
        this.v2length = this.value2.length
        this.thirdList = []
        this.value3 = ''
        this.re()
        for (let w = 0; w < this.dataList.length; w++) {
          if (this.erDataList[w].name === newname) {
            // 构建参数
            this.params.grade = newname
            this.getList()
            // 更改选择框
            this.sanDataList = this.erDataList[w].children
            for (let a = 0; a < this.sanDataList.length; a++) {
              this.thirdList.push(this.sanDataList[a].name)
            }
            return
          }
        }
      },
      value3 (newname, oldname) {
        this.re()
        this.params.classe = newname
        this.getList()
      }
    },
    mounted () {
      this.source = this.firstList
      this.getTree()
      this.getList()
    },
    methods: {
      re () {
        this.city = []
      },
      getList () {
        this.$http({
          url: '/graph/Graph/regional',
          method: 'get',
          params: this.params
        }).then(({data}) => {
          if (data && data.success) {
            this.city = data.list
            this.init()
          }
        })
      },
      init (data) {
        let myChart = echarts.init(document.getElementById('map'))
        echarts.registerMap('henan', henanJson)
        var titledata = []
        var bartop10 = []
        function NumDescSort (a, b) {
          return b.value - a.value
        }
        function NumAsceSort (a, b) {
          return a.value - b.value
        }
        // 先进行一次降序排序，找出最大的前十个
        this.city.sort(NumDescSort)
        // console.log(this.city)
        for (var i = 0; i < this.city.length; i++) {
          if (i === 0) {
            this.maxNumber = this.city[i].value
          }
          var top10 = {
            name: this.city[i].name,
            value: this.city[i].value
          }
          if (this.city[i].name !== '' && this.city[i].name !== undefined) {
            bartop10.push(top10)
          }
        }

        bartop10.sort(NumAsceSort)
        for (var j = 0; j < bartop10.length; j++) {
          titledata.push(bartop10[j].name)
        }
        // 上面两行字
        let option = {
          title: [{
            show: true,
            text: '地域分布'
          },
          {
            show: true,
            text: 'TOP 排行榜',
            right: '40',
            textStyle: {
              color: '#666666',
              fontSize: 14
            }
          }],
          // 鼠标划入时提示
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              if (!params.value) {
                return '该地区暂无访问量'
              }
              return params.seriesName + '<br />' + params.name + '：' + params.value
            },
            confine: true
          },
          // 条形图
          grid: {
            // 仅仅控制条形图的位置
            show: true,
            containLabel: false,
            right: 10,
            top: 30,
            bottom: 10,
            width: '30%'
          },
          // 热力区间
          visualMap: {
            type: 'continuous',
            min: 0,
            max: this.maxNumber,
            text: ['多', '少'],
            seriesIndex: [0, 2],
            dimension: 0,
            realtime: false,
            left: 0,
            top: '400',
            itemWidth: 18,
            itemHeight: 100,
            calculable: true,
            inRange: {
              color: ['#5ab1ef', '#e5cf0d', '#c05050']
            },
            outOfRange: {
              color: ['#eeeeee'],
              symbolSize: [100, 100]
            }
          },
          toolbox: {
            show: false
          },
          xAxis: [
            {
              type: 'value',
              position: 'top',
              inside: false,
              axisLabel: {
                show: false
              },
              splitLine: {
                show: false
              },
              margin: 10
            }
          ],
          yAxis: [
            {
              type: 'category',
              boundaryGap: true,
              axisLine: {
                show: false
              },
              axisLabel: {
                align: 'right',
                margin: 10,
                showMaxLabel: true,
                fontSize: 11
              },
              data: titledata
            }
          ],
          series: [
            {
              name: '人数',
              type: 'map',
              left: '100',
              width: '40%',
              // bottom: '100',
              top: '70',
              roam: 'move',
              mapType: 'henan', // 自定义扩展图表类型
              mapValueCalculation: 'sum',
              zoom: 1,
              selectedMode: false,
              showLegendSymbol: false,
              // zoom: 1.4,
              label: {
                normal: {
                  textStyle: {
                    color: '#666'
                  }
                },
                emphasis: {
                  textStyle: {
                    color: '#234EA5'
                  }
                }
              },
              itemStyle: {
                // normal: {label: {show: true}},
                emphasis: {label: {show: true}},
                normal: {
                  label: {
                    show: true,
                    textStyle: {
                      color: '#444'
                    }
                  }
                }
              },
              data: this.city
            },
            {
              right: '300',
              width: '30%',
              name: '人数',
              type: 'bar',
              roam: false,
              visualMap: false,
              // itemStyle: {
              //   color: "#60ACFC"
              // },
              barWidth: 18,
              label: {
                normal: {
                  show: true,
                  fontSize: 12,
                  position: 'insideLeft'
                },
                emphasis: {
                  show: true
                }
              },
              data: bartop10
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      },
      pinyinMatch (val) {
        this.copyDept = this.firstList
        if (val) {
          let result = [] // 声明一个空数组保存搜索内容
          this.copyDept.forEach(e => { // 循环判断内容和拼音首字母是否匹配
            let m = pinyin.match(e, val)
            if (m) {
              result.push(e)
            }
          })
          this.source = result // 返回匹配的数组
        } else {
          this.source = this.copyDept // 未输入返回开始copy的原数组
        }
      },
      getTree () {
        this.$http({
          url: '/sys/office/treeData',
          method: 'get'
        }).then(({data}) => {
          // 把整个子节点都存到树表中
          // console.log(data)
          this.dataList = data.treeData[0].children
          for (let i = 0; i < this.dataList.length; i++) {
            this.firstList.push(this.dataList[i].name)
          }
        })
      }
    }
}
</script>
<style>

</style>
